<template>
  <div style="margin-top: 0vh">
<!--    <span :class="getIco('DY250893')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250893')" />-->

    <div class="backimg">
      <div style="text-align: center;font-size: xxx-large;margin-bottom: 2vh">管壳车间设备状态看板</div>
<!--      第一行-->
      <div>
        <span :class="getIco('DY251668')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251668')" />
        <span :class="getIco('DY252667')"  @click="bccelldblclick()"  @mouseover="getTitles('DY252667')" style="margin-left: 10vw"/>
        <span :class="getIco('DY20663')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20663')"  style="margin-left: 10vw"/>
        <span :class="getIco('DY250225')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250225')"  style="margin-left: 20vw"/>
        <span :class="getIco('DY250226')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250226')"  style="margin-left: 15vw"/>
        <span :class="getIco('DY250227')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250227')"  style="margin-left: 15vw"/>
        <span :class="getIco('DY250834')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250834')"  style="margin-left: 15vw"/>
      </div>
<!--      第二行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY250882-1')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250882-1')" style="margin-left: 90vw"/>
      </div>
<!--      第三行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY250882')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250882')"  style="margin-left: 90vw"/>
      </div>
<!--      第四行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY251794')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251794')" style="margin-left: 21.7vw"/>
        <span :class="getIco('DY251368')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251368')" style="margin-left: 20vw"/>
        <span :class="getIco('DY251369')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251369')" style="margin-left: 8vw"/>
        <span :class="getIco('DY250401')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250401')" style="margin-left: 6vw"/>
        <span :class="getIco('DY251698')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251698')" style="margin-left: 7vw"/>
        <span :class="getIco('DY250249')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250249')"style="margin-left: 15vw"/>
        <span :class="getIco('DY01136')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01136')" style="margin-left: 2vw"/>
        <span :class="getIco('DY250837')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250837')" style="margin-left: 4.5vw"/>
      </div>
<!--      第五行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY251367')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251367')" style="margin-left: 42.6vw"/>
        <span :class="getIco('DY251370')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251370')" style="margin-left: 8vw"/>
        <span :class="getIco('DY250402')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250402')" style="margin-left: 6vw"/>
        <span :class="getIco('DY251699')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251699')" style="margin-left: 7vw"/>
        <span :class="getIco('DY250250')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250250')" style="margin-left: 15vw"/>
        <span :class="getIco('DY01134')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01134')" style="margin-left: 2vw"/>
        <span :class="getIco('DY250838')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250838')" style="margin-left: 4.5vw"/>
      </div>
<!--      第六行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY251366')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251366')"  style="margin-left: 42.6vw"/>
        <span :class="getIco('DY250138')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250138')"  style="margin-left: 8vw"/>
        <span :class="getIco('DY01117')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01117')"  style="margin-left: 6vw"/>
        <span :class="getIco('DY21228')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21228')" style="margin-left: 7vw"/>
        <span :class="getIco('DY00783')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00783')" style="margin-left: 15vw"/>
        <span :class="getIco('DY01135')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01135')" style="margin-left: 2vw"/>
        <span :class="getIco('DY00910')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00910')" style="margin-left: 4.5vw"/>
      </div>
<!--      第七行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY251365')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251365')" style="margin-left: 42.6vw"/>
        <span :class="getIco('DY250137')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250137')" style="margin-left: 8vw"/>
        <span :class="getIco('DY01118')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01118')" style="margin-left: 6vw"/>
        <span :class="getIco('DY00072')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00072')" style="margin-left: 22.8vw"/>
        <span :class="getIco('DY01133')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01133')" style="margin-left: 2vw"/>
        <span :class="getIco('DY21262')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21262')" style="margin-left: 4.5vw"/>
      </div>
<!--      第八行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY251364')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251364')"  style="margin-left: 42.6vw"/>
        <span :class="getIco('DY20117')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20117')" style="margin-left: 8vw"/>
        <span :class="getIco('DY01558')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01558')" style="margin-left: 6vw"/>
        <span :class="getIco('DY01611')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01611')" style="margin-left: 22.8vw"/>
        <span :class="getIco('DY21239')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21239')" style="margin-left: 2vw"/>
        <span :class="getIco('DY21382')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21382')" style="margin-left: 4.5vw"/>
      </div>
<!--      /第九行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY251363')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251363')" style="margin-left: 42.6vw"/>
        <span :class="getIco('DY20116')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20116')" style="margin-left: 8vw"/>
        <span :class="getIco('DY250444')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250444')" style="margin-left: 6vw"/>
        <span :class="getIco('DY01610')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01610')" style="margin-left: 22.8vw"/>
        <span :class="getIco('DY20577')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20577')" style="margin-left: 2vw"/>
        <span :class="getIco('DY21381')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21381')" style="margin-left: 4.5vw"/>
      </div>
<!--      第十行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY251362')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251362')"  style="margin-left: 42.6vw"/>
        <span :class="getIco('DY20118')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20118')" style="margin-left: 8vw"/>
        <span :class="getIco('DY00151')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00151')" style="margin-left: 6vw"/>
        <span :class="getIco('DY01156')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01156')" style="margin-left: 22.8vw"/>
        <span :class="getIco('DY01057')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01057')" style="margin-left: 7.3vw"/>
      </div>
<!--      第十一行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY251361')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251361')"  style="margin-left: 42.6vw"/>
        <span :class="getIco('DY20115')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20115')" style="margin-left: 8vw"/>
        <span :class="getIco('DY250400')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250400')" style="margin-left: 6vw"/>
        <span :class="getIco('DY00155')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00155')" style="margin-left: 22.8vw"/>
        <span :class="getIco('DY00142')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00142')" style="margin-left: 7.3vw"/>
      </div>
<!--      第十二行-->
      <div style="margin-top: 2vh">
        <span >总计设备数：{{tmp.total}}</span>
        <span :class="getIco('DY250139')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250139')" style="margin-left: 36.6vw"/>
        <span :class="getIco('DY00146')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00146')" style="margin-left: 14.8vw"/>
        <span :class="getIco('DY251811')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251811')" style="margin-left: 23vw"/>
        <span :class="getIco('DY20458')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20458')" style="margin-left: 7.2vw"/>
      </div>
<!--      第十三行-->
      <div style="margin-top: 2vh">
        <span style="color: #00a65a">运行设备数：{{tmp.run}}</span>
        <span :class="getIco('DY21344')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21344')" style="margin-left: 37vw"/>
        <span :class="getIco('DY00135')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00135')" style="margin-left: 46.7vw"/>
      </div>
<!--      第十四行-->
      <div style="margin-top: 2vh">
        <span style="color: #c505fc">关机设备数：{{tmp.down}}</span>
        <span :class="getIco('DY00127')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00127')" style="margin-left: 36.6vw"/>
        <span :class="getIco('DY00173')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00173')" style="margin-left: 3vw"/>
        <span :class="getIco('DY20692')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20692')" style="margin-left: 6vw"/>
        <span :class="getIco('DY00172')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00172')" style="margin-left: 3vw"/>
        <span :class="getIco('DY21274')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21274')" style="margin-left: 6vw"/>
        <span :class="getIco('DY21082')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21082')" style="margin-left: 3vw"/>
        <span :class="getIco('DY251530')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251530')" style="margin-left: 6vw"/>
        <span :class="getIco('DY251680')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251680')" style="margin-left: 3vw"/>
        <span :class="getIco('DY00157')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00157')" style="margin-left: 5vw"/>
        <span :class="getIco('DY21269')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21269')" style="margin-left: 2vw"/>
        <span :class="getIco('DY00750')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00750')" style="margin-left: 2.3vw"/>
      </div>
<!--      第十五行-->
      <div style="margin-top: 2vh">
        <span style="color: #0083fd">待机设备数：{{tmp.wait}}</span>
        <span :class="getIco('DY00908')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00908')" style="margin-left: 37vw"/>
        <span :class="getIco('DY00129')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00129')" style="margin-left: 3vw"/>
        <span :class="getIco('DY20218')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20218')" style="margin-left: 6vw"/>
        <span :class="getIco('DY00133')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00133')" style="margin-left: 3vw"/>
        <span :class="getIco('DY01476')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01476')" style="margin-left: 6vw"/>
        <span :class="getIco('DY21261')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21261')" style="margin-left: 3vw"/>
        <span :class="getIco('DY251529')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251529')" style="margin-left: 6vw"/>
        <span :class="getIco('DY251531')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251531')" style="margin-left: 3vw"/>
        <span :class="getIco('DY01013')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01013')" style="margin-left: 5vw"/>
        <span :class="getIco('DY00134')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00134')" style="margin-left: 2vw"/>
        <span :class="getIco('DY20216')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20216')" style="margin-left: 2.4vw"/>
      </div>
<!--      第十六行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY00751')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00751')" style="margin-left: 42.6vw"/>
        <span :class="getIco('DY01064')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01064')" style="margin-left: 3vw"/>
        <span :class="getIco('DY00128')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00128')" style="margin-left: 6vw"/>
        <span :class="getIco('DY21377')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21377')" style="margin-left: 3vw"/>
        <span :class="getIco('DY21273')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21273')" style="margin-left: 6vw"/>
        <span :class="getIco('DY21379')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21379')" style="margin-left: 3vw"/>
        <span :class="getIco('DY251532')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251532')" style="margin-left: 6vw"/>
        <span :class="getIco('DY251782')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251782')" style="margin-left: 3vw"/>
        <span :class="getIco('DY01530')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01530')" style="margin-left: 5vw"/>
        <span :class="getIco('DY01529')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01529')" style="margin-left: 2vw"/>
        <span :class="getIco('DY00213')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00213')" style="margin-left: 2.4vw"/>
      </div>
<!--      第十七行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY20217')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20217')" style="margin-left: 42.6vw"/>
        <span :class="getIco('DY250443')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250443')" style="margin-left: 3vw"/>
        <span :class="getIco('DY00752')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00752')" style="margin-left: 6vw"/>
        <span :class="getIco('DY21242')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21242')" style="margin-left: 3vw"/>
        <span :class="getIco('DY20841')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20841')" style="margin-left: 6vw"/>
        <span :class="getIco('DY00147')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00147')" style="margin-left: 3vw"/>
        <span :class="getIco('DY251681')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251681')" style="margin-left: 6vw"/>
        <span :class="getIco('DY251651')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251651')" style="margin-left: 3vw"/>
        <span :class="getIco('DY00153')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00153')" style="margin-left: 5vw"/>
        <span :class="getIco('DY251732')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251732')" style="margin-left: 2vw"/>
        <span :class="getIco('DY00214')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00214')" style="margin-left: 2.4vw"/>
      </div>
<!--      第十八行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY01434')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01434')" style="margin-left: 42.6vw"/>
        <span :class="getIco('DY00767')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00767')" style="margin-left: 3vw"/>
        <span :class="getIco('DY21378')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21378')" style="margin-left: 6vw"/>
        <span :class="getIco('DY251714')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251714')" style="margin-left: 3vw"/>
        <span :class="getIco('DY21380')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21380')" style="margin-left: 6vw"/>
        <span :class="getIco('DY251724')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251724')" style="margin-left: 3vw"/>
        <span :class="getIco('DY251783')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251783')" style="margin-left: 6vw"/>
        <span :class="getIco('DY251652')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251652')" style="margin-left: 3vw"/>
        <span :class="getIco('DY00907')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00907')" style="margin-left: 5vw"/>
        <span :class="getIco('DY20459')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20459')" style="margin-left: 2vw"/>
        <span :class="getIco('DY01058')"  @click="bccelldblclick()"  @mouseover="getTitles('DY01058')" style="margin-left: 2.4vw"/>
      </div>
<!--      第十九行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY250442')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250442')" style="margin-left: 42.6vw"/>
        <span :class="getIco('DY21390')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21390')" style="margin-left: 10vw"/>
        <span :class="getIco('DY00148')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00148')" style="margin-left: 9.6vw"/>
        <span :class="getIco('DY251650')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251650')" style="margin-left: 10vw"/>
        <span :class="getIco('DY20908')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20908')" style="margin-left: 8.8vw"/>
        <span :class="getIco('DY251733')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251733')" style="margin-left: 2vw"/>
        <span :class="getIco('DY00160')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00160')" style="margin-left: 2.4vw"/>
      </div>
<!--      第二十行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY250445')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250445')" style="margin-left: 42.6vw"/>
        <span :class="getIco('D251715')"  @click="bccelldblclick()"  @mouseover="getTitles('D251715')" style="margin-left: 10vw"/>
        <span :class="getIco('DY251725')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251725')" style="margin-left: 9.6vw"/>
        <span :class="getIco('DY251653')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251653')" style="margin-left: 10vw"/>
        <span :class="getIco('DY00149')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00149')" style="margin-left: 8.8vw"/>
        <span :class="getIco('DY20579')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20579')" style="margin-left: 2vw"/>
        <span :class="getIco('DY00891')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00891')" style="margin-left: 2.4vw"/>
      </div>
<!--      第二十一行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY21220')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21220')" style="margin-left: 87.2vw"/>
        <span :class="getIco('DY00212')"  @click="bccelldblclick()"  @mouseover="getTitles('DY00212')" style="margin-left: 2.5vw"/>
      </div>
<!--      第二十二行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY20712')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20712')" style="margin-left: 87.2vw"/>
      </div>
<!--      第二十四行，没有23行-->
      <div style="margin-top: 2vh">
        <span :class="getIco('DY251679')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251679')" style="margin-left: 42.6vw"/>
        <span :class="getIco('DY20575')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20575')" style="margin-left: 3vw"/>
        <span :class="getIco('DY21221')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21221')" style="margin-left: 3vw"/>
        <span :class="getIco('DY21237')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21237')" style="margin-left: 3vw"/>
        <span :class="getIco('DY20576')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20576')" style="margin-left: 3vw"/>
        <span :class="getIco('DY250836')"  @click="bccelldblclick()"  @mouseover="getTitles('DY250836')" style="margin-left: 3vw"/>
        <span :class="getIco('DY21083')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21083')" style="margin-left: 3vw"/>
        <span :class="getIco('DY21240')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21240')" style="margin-left: 3vw"/>
        <span :class="getIco('DY20578')"  @click="bccelldblclick()"  @mouseover="getTitles('DY20578')" style="margin-left: 3vw"/>
        <span :class="getIco('DY21222')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21222')" style="margin-left: 3vw"/>
        <span :class="getIco('DY251206')"  @click="bccelldblclick()"  @mouseover="getTitles('DY251206')" style="margin-left: 3vw"/>
        <span :class="getIco('DY21238')"  @click="bccelldblclick()"  @mouseover="getTitles('DY21238')" style="margin-left: 3vw"/>
      </div>

    </div>
    <template>
      <el-dialog
        :visible.sync="dialogVisible"
        title="设备实时运行参数"
        width="70%"
        @close="handleClose"
      >
        <div style="border: 1px solid #000000">
          <div>
            <el-row>
              <el-col :span="8">
                <div class="grid-content" style="text-align: left">

                  <div style="border-top: 1px solid #000000">
                    <div>
                      <el-row>
                        <el-col :span="12"></el-col>
                        <el-col :span="12"></el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12"></el-col>
                        <el-col :span="12"></el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">设备:{{ deviceInfo.fmachNo }}<span/></div>
                        </el-col>
                        <el-col :span="12">
                          <div style="margin: 0.4rem">状态：{{deviceInfo.fmachState}}</div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">程序名称:{{ deviceInfo.fprogramNo }}<span/>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem"><span v-if="deviceInfo.fworkNumTime > 0">总加工时间:{{
                              deviceInfo.fworkNumTime
                            }}小时</span><span/>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">主轴转速:{{ deviceInfo.fbearSpeed }}<span/>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">进给速度:{{ deviceInfo.floadSpeed }}<span/>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">报警号:{{ deviceInfo.fwarningNo }}<span/>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">报警类型:{{ deviceInfo.fwarningType }}<span/>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <div class="grid-content" style="margin: 0.4rem">报警详细信息:{{ deviceInfo.fwarningMsg }}<span/>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">X轴相对位置:{{ deviceInfo.fcoorRelPosX }}<span/>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">X轴绝对位置:{{ deviceInfo.fcoorAbsPosX }}<span/>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">Y轴相对位置:{{ deviceInfo.fcoorRelPosY }}<span/>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">Y轴绝对位置:{{ deviceInfo.fcoorAbsPosY }}<span/>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">Z轴相对速度:{{ deviceInfo.fcoorRelPosZ }}<span/>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="grid-content" style="margin: 0.4rem">Z轴绝对位置:{{ deviceInfo.fcoorAbsPosZ }}<span/>
                          </div>
                        </el-col>
                      </el-row>
                    </div>

                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content" style="border: 1px solid #000000">
                  <SimEcharts :chart-data="gaugeDataleft"/>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content" style="border: 1px solid #000000">
                  <SimEcharts :chart-data="gaugeDataright"/>
                </div>
              </el-col>

            </el-row>
          </div>
          <div><SimEcharts :chart-data="basicLineData" style="height: 300px;margin-bottom: -2rem"/></div>
        </div>

      </el-dialog>
    </template>
  </div>
</template>

<script>
import {
  gaugeData,
  basicLineData
} from '../../api/service-module/dashBoard/echartsData'
import {
  queryDeviceFromSCADA
} from '../../api/service-module/report/MesScadaReport'
import {closeWebsocket, connectWebsocket, sendMessage} from "@/api/websocket";
export default {
  name: 'GuanKeFactoryScadaStateDashboard',
  data() {
    return {
      tmp: '',
      messages: '',
      notifyPromise: Promise.resolve(),
      myTime: '',
      //  下面五个对应设备总数上6个值
      a1: 0,
      a2: 0,
      a3: 0,
      a4: 0,
      a5: 0,
      a6: 0,
      nowDate: '',
      basicLineData: JSON.parse(JSON.stringify(basicLineData)),
      gaugeDataleft: JSON.parse(JSON.stringify(gaugeData)),
      gaugeDataright: JSON.parse(JSON.stringify(gaugeData)),
      deviceInfo: '',
      dialogVisible:false,
      clickData:''
    }
  },
  destroyed() {
    //页面刷新会调用销毁前的方法，就是这个，清楚页面的定时器等，防止垃圾遗留
    this.clear
    closeWebsocket()
  },
  mounted() {
    this.formatDatetime()
    this.initWebData()
    this.reloadWeb()
  },
  // created() {
  //   this.selectScadaState()
  // },
  methods: {
    bccelldblclick() {
      this.deviceInfo = ''
      this.gaugeDataleft.series[0].data[0].name = '主轴倍率'
      this.gaugeDataleft.series[0].data[0].value = 0
      this.gaugeDataleft.series[0].max = 200
      this.gaugeDataright.series[0].data[0].name = '进给倍率'
      this.gaugeDataright.series[0].data[0].value = 0
      this.gaugeDataright.series[0].max = 200

      this.dialogVisible = true
      this.searchNo = this.clickData
      this.searchDevice(this.clickData)
      this.timer = window.setInterval(() => {
        setTimeout(this.searchDevice(this.clickData), 0)
      }, 5000)
    },
    searchDevice(deviceNo) {
      queryDeviceFromSCADA(deviceNo).then((resp) => {
        this.deviceInfo = resp.data.data
        console.log(resp.data.data)
        this.gaugeDataleft.series[0].data[0].name = '主轴倍率'
        this.gaugeDataleft.series[0].data[0].value = resp.data.data.fbearPer
        this.gaugeDataleft.series[0].detail.formatter = '{value}'
        this.gaugeDataright.series[0].data[0].name = '进给倍率'
        this.gaugeDataright.series[0].data[0].value = resp.data.data.floadPer
        this.gaugeDataright.series[0].detail.formatter = '{value}'
        this.basicLineData.title.text = '设备实时工作曲线'

        this.basicLineData.series[0].data = resp.data.data.fbearSpeedList
        this.basicLineData.legend.data[0] = '主轴转速'
        this.basicLineData.series[0].name = '主轴转速'
        this.basicLineData.series[0].itemStyle.normal.label.textStyle.color = '#71f604'


        this.basicLineData.series[1].data = resp.data.data.floadSpeedList
        this.basicLineData.legend.data[1] = '进给速度'
        this.basicLineData.series[1].name = '进给速度'
        this.basicLineData.series[1].itemStyle.normal.label.textStyle.color = '#f66904'
      })
    },
    handleClose() {
      window.clearInterval(this.timer) // 清理定时器
    },
    initWebData() {
      connectWebsocket(
        // 测试地址
        process.env.VUE_APP_WS_URL+'/ScadaState/device',
        // 传递给后台的数据
        '5424',
        // 成功拿到后台返回的数据的回调函数
        (data) => {
          this.tmp = JSON.parse(data)
          console.log(JSON.parse(data))
        },
      () => {
        sendMessage("im tird!")
      }
      )
    },
    reloadWeb(){
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload,1000*60*60*8)
    },
    formatDatetime() { setInterval(this.formatDate, 1000) },
    getTitles(n) {
      clearTimeout(this.myTime)
      this.myTime = setTimeout(() => { this.waitGetTitles(n) }, 1500)
    },
    async waitGetTitles(n) {
      if (this.myTime <= 1) { return }
      if (this.tmp[n] === '1') {
        this.messages = '设备正在运行' + n
        this.clickData = n
        await this.$message({ message: this.messages, type: 'success' })
      } else if (this.tmp[n] === '2') {
        this.messages = '设备待机中' + n
        this.clickData = n
        await this.$message({ message: this.messages, type: 'success' })
      } else if (this.tmp[n] === '3') {
        this.messages = '机器异常！请检查' + n
        this.clickData = n
        await this.$message({ message: this.messages, type: 'warning' })
      } else if (this.tmp[n] === '4') {
        this.messages = '因设备断网/关机，无法获取机器信息' + n
        this.clickData = n
        await this.$message.error(this.messages)
      } else if (this.tmp[n] === '5') {
        this.messages = '设备正在调试，请稍后查看' + n
        this.clickData = n
        await this.$message({ message: this.messages, type: 'warning' })
      } else {
        this.messages = '无法获取机器信息' + n
        this.clickData = n
        await this.$message.error(this.messages)
      }
    },

    // selectScadaState() {
    //   selectThreeFactoryScadaState().then(res => {
    //     this.tmp = res.data
    //     // this.a1 = Object.keys(this.tmp).length
    //     // this.getTotal(this.tmp)
    //   })
    // },
    getTotal(T) {
      this.a2 = 0
      this.a3 = 0
      this.a4 = 0
      this.a5 = 0
      this.a6 = 0
      for (var i in T) {
        if (T[i] === '1') {
          this.a2 += 1
        }
        if (T[i] === '2') {
          this.a3 += 1
        }
        if (T[i] === '3') {
          this.a4 += 1
        }
        if (T[i] === '4') {
          this.a5 += 1
        }
        if (T[i] === '5') {
          this.a6 += 1
        }
      }
    },
    getIco: function(type) {
      if (this.tmp[type] === '1') {
        return 'el-icon-circle-check'
      } else if (this.tmp[type] === '2') {
        return 'el-icon-video-play'
      } else if (this.tmp[type] === '3') {
        return 'el-icon-warning-outline'
      } else if (this.tmp[type] === '4') {
        return 'el-icon-setting'
      } else if (this.tmp[type] === '5') {
        return 'el-icon-moon'
      } else {
        return 'el-icon-loading'
      }
    },
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    }
  }
}
</script>

<style lang="scss" scoped>

/* 小分辨率设备 (平板、电视机或者安卓设备, 960px and down) */
@media only screen and (max-width: 960px){
  .backimg {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    color: #FFFFFF;
    //background: linear-gradient(#a1e8e2, #e8e1aa, #e5c0e0,#a1e8e2, #e8e1aa, #e5c0e0);
    //animation: rotate 5.5s linear infinite;

    .body-leftbody {
      .leftbody-head {
        .left-head {
          margin-left: 10rem;
          text-align: center;
          font-size: 1rem;
        }
        .left-main-center {
          .left-main-body-box-con {}
        }
        .left-main-right {
          border: 1px solid #0B5195;
          .left-main-right1 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right2 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right3 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              height: 3vh!important;
              padding: 0.3rem;
            }
          }
          .left-main-right4 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right5 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right6 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right7 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right8 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right9 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right10 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right11 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right12 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right13 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right14 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
          .left-main-right15 {
            border: 1px solid #0B5195;
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 0.3rem;
            }
          }
        }
        .left-main-left {
          border: 1px solid #0B5195;
          .left-main-left-grid-content {
            font-size: 1rem!important;
            margin-bottom: -0.15rem;
          }
          .left-main-left-grid-content-center {
            font-size: 0.4rem!important;

          }
          .left-main-left-grid-content-button {
            font-size: 0.5rem!important;

          }
        }
      }
      .center-head {
        border: 0.1px solid #0B5195;
        .center-head-content {
          border: 0.1px solid #0B5195;
          .center-head-content1 {
            padding: 0.2rem!important;
            font-size: 1rem!important;
          }
        }
        .center-body-content6 {
          border: 1px solid #0B5195;
          border-style: solid solid none solid;
          padding: 0.4rem;
        }
        .center-body-content8 {
          border: 1px solid #0B5195;
          .center-body-content6-right {
            border: 1px solid #0B5195;
            padding-top: 1.5rem;
            padding-bottom: 1rem;
          }
          .center-body-content6-left {
            border: 1px solid #0B5195;
            .center-body-content6-left1 {
              padding-top: 0.5rem!important;
            }
          }
          .center-body-content6-center {
            border: 1px solid #0B5195;
            .center-body-content6-center-top {
              padding-left: 0.7rem;
              font-size: 1rem!important;
              padding-top: 0.3rem;
            }
            .center-body-content6-center-button {
              padding-top: 0.2rem;
              .center-body-content6-center-button1 {
                padding-left: 0.5rem;
                font-size: 0.5rem!important;
                padding-top: 0.3rem;
                padding-bottom: 0.5rem;
              }
            }
          }
        }
        .center-body-content7 {
          border: 1px solid #0B5195;
          border-style: none solid solid solid;
        }
        .center-body-content5 {
          border: 1px solid #0B5195;
          padding: 0.4rem;
        }
        .center-body-content4 {
          border: 1px solid #0B5195;
          text-align: center;
          .center-body-content4-right {
            font-size: 1rem!important;
            border: 1px solid #0B5195;
            .center-body-content4-right1 {
              font-size: 1rem!important;
            }
          }
          .item1 {
            border: 1px solid #0B5195;
            padding-top: 3rem;
            padding-bottom: 3rem;
          }
          .item2 {
            border: 1px solid #0B5195;
            padding-top: 3rem;
            padding-bottom: 3rem;
          }
        }
        .center-body-content3 {
          border: 1px solid #0B5195;
          text-align: center;
          .center-body-content-left {
            border: 1px solid #0B5195;
            .grid-content {
              margin-bottom: -0.1rem;
              margin-top: -0.1rem;
            }
          }
          .center-body-content-center {
            border: 1px solid #0B5195;
            .grid-content {
              margin-bottom: -0.1rem;
              margin-top: -0.1rem;
            }
          }
          .center-body-content-right {
            border: 1px solid #0B5195;
            .center-body-content-right-top {
              font-size: 1rem!important;
              padding: 0.1rem;
            }
            .center-body-content-right-center {
              border: 1px solid #0B5195;
              font-size: 1rem!important;
              height: 5rem!important;
              .center-body-content-right-center1 {
                margin-top: 0.3rem;
              }
            }
            .center-body-content-right-button {
              border: 1px solid #0B5195;
              font-size: 1rem!important;
              .center-body-content-right-button1 {
              }
            }
          }
        }
      }
      .right-body {
        border: 1px solid #0B5195;
        .right-body-com {
          font-size: 1rem!important;
          margin-top: -0.05rem;
        }
      }
    }
    .el-row {
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
/* 大分辨率设备 (工作站或者台式机, 961px and up) */
@media only screen and (min-width: 961px) {
  .backimg {
    background-image: url("../../../public/billboard.jpg");
    height: 100vh;
    width: 100vw;
    color: #FFFFFF;
    padding-top: 2.5rem;
    padding-left: 2vw;
    .body-leftbody {
      .leftbody-head {
        .left-head {
          margin-left: 25rem;
          text-align: center;
          font-size: 2rem;
        }
        .left-main-center {
          .left-main-body-box-con {}
        }
        .left-main-right {
          .left-main-right1 {
            border: 0.1px solid rgba(11, 81, 149, 0.27);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1rem;
            }
          }
          .left-main-right2 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1rem;
            }
          }
          .left-main-right3 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              height: 3vh!important;
              padding: 1.1rem;
            }
          }
          .left-main-right4 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.1rem;
            }
          }
          .left-main-right5 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.1rem;
            }
          }
          .left-main-right6 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.4rem;
            }
          }
          .left-main-right7 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.4rem;
            }
          }
          .left-main-right8 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.4rem;
            }
          }
          .left-main-right9 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.4rem;
            }
          }
          .left-main-right10 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.4rem;
            }
          }
          .left-main-right11 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.4rem;
            }
          }
          .left-main-right12 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.4rem;
            }
          }
          .left-main-right13 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.4rem;
            }
          }
          .left-main-right14 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.4rem;
            }
          }
          .left-main-right15 {
            border: 0.1px solid rgba(11, 81, 149, 0.4);
            .left-main-body-right-con {
              font-size: 1rem!important;
              padding: 1.4rem;
            }
          }
        }
        .left-main-left {
          .left-main-left-grid-content {
            font-size: 1rem!important;
            padding: 0.5rem;
          }
          .left-main-left-grid-content-center {
            font-size: 0.4rem!important;
          }
          .left-main-left-grid-content-button {
            font-size: 0.4rem!important;
          }
        }
      }
      .center-head {
        border: 1px solid rgba(94, 151, 246, 0.28);
        .center-head-content {
          .center-head-content1 {
            margin: 1rem!important;
            font-size: 1rem!important;
          }
        }
        .center-body-content6 {
          border: 1px solid rgba(94, 151, 246, 0.28);
          border-style: solid solid none solid;
          padding: 1.4rem;
        }
        .center-body-content8 {
          border: 1px solid rgba(94, 151, 246, 0.28);
          .center-body-content6-right {
            padding: 1.5rem;
          }
          .center-body-content6-left {
            border: 1px solid rgba(94, 151, 246, 0.28);
            .center-body-content6-left1 {
              padding: 0.5rem!important;
            }
          }
          .center-body-content6-center {
            border: 1px solid rgba(94, 151, 246, 0.28);
            .center-body-content6-center-top {
              padding-left: 2rem;
              font-size: 1rem!important;
              padding-top: 0.6rem;
              padding-button: 0.6rem;
            }
            .center-body-content6-center-button {
              border: 1px solid rgba(94, 151, 246, 0.28);
              padding-left: 1rem;
              padding-top: 1rem;
              padding-bottom: 0.8rem;
              .center-body-content6-center-button1 {
                padding-left: 0.3rem;
                font-size: 0.5rem!important;
              }
            }
          }
        }
        .center-body-content7 {
          border: 1px solid rgba(94, 151, 246, 0.28);
          border-style: none solid solid solid;
        }
        .center-body-content5 {
          border: 1px solid rgba(94, 151, 246, 0.28);
          padding: 1rem;
        }
        .center-body-content4 {
          padding-top: 1rem;
          border: 1px solid rgba(94, 151, 246, 0.28);
          text-align: center;
          .center-body-content4-right {
            font-size: 1rem!important;
            border: 1px solid rgba(94, 151, 246, 0.28);
            .center-body-content4-right1 {
              font-size: 1rem!important;
              padding-top: 2rem;
            }
          }
          .item1 {
            border: 1px solid rgba(94, 151, 246, 0.28);
            padding-top: 8rem;
            padding-bottom: 8rem;
          }
          .item2 {
            border: 1px solid rgba(94, 151, 246, 0.28);
            padding-top: 8rem;
            padding-bottom: 8rem;
          }
        }
        .center-body-content3 {
          border: 1px solid rgba(94, 151, 246, 0.28);
          .center-body-content-left {
            border: 1px solid rgba(94, 151, 246, 0.28);
            .grid-content {
              height: 2.95rem!important;
              text-align: center;
            }
          }
          .center-body-content-center {
            text-align: center;
            border: 1px solid rgba(94, 151, 246, 0.28);
            .grid-content {
              height: 2.95rem!important;
            }
          }
          .center-body-content-right {
            padding-left: 1rem;
            height: 23.5rem;
            border: 1px solid rgba(94, 151, 246, 0.28);
            .center-body-content-right-top {
              font-size: 1rem!important;
              height: 3rem!important;
              padding-top: 2rem;
            }
            .center-body-content-right-center {
              font-size: 1rem!important;
              height: 5rem!important;
              padding-top: 2.8rem;
              .center-body-content-right-center1 {
                margin-top: 3rem;
              }
            }
            .center-body-content-right-button {
              font-size: 1rem!important;
              padding-top: 2.5rem;
              .center-body-content-right-button1 {
                margin-top: 1.8rem;
              }
            }
          }
        }
      }
      .right-body {
        border: 1px solid #0B5195;
        .right-body-com {
          font-size: 1rem!important;
          padding-left: 2rem;
          padding-top: 1.43rem;
        }
      }
    }
  }
  .el-row {
    margin-bottom: 0.15rem;
    border: 1px solid rgba(94, 151, 246, 0.19);
    &:last-child {
      margin-bottom: 0;
    }
  }
}

//.el-icon-switch-button {
//  background: #f50226;
//  border-radius: 90%;
//}
//.el-icon-video-play {
//  background: #02f53f;
//  border-radius: 90%;
//}
//
//.el-icon-setting{
//  background: #fce409;
//  border-radius: 90%;
//}
//.el-icon-circle-check {
//  background: #02f53f;
//  border-radius: 90%;
//}

.el-col {
}

.row-bg {
  padding: 1px 0;
  background-color: #f9fafc;
}

.el-icon-circle-check {
  color: rgba(8, 255, 0, 0.92) !important;
  animation: fade 20000ms infinite!important;
  -webkit-animation: fade 20000ms infinite!important;
  font-size: 100%!important;
  background: #02f53f;
    border-radius: 90%;
}

.el-icon-video-play {
  color: #2905f3 !important;
  animation: fade 20000ms infinite!important;
  -webkit-animation: fade 20000ms infinite!important;
  background: #2905F3FF;
    border-radius: 90%;
}

.el-icon-warning-outline {
  color: #f1da06 !important;
  animation: fade 600ms infinite!important;
  -webkit-animation: fade 600ms infinite!important;
  background: #f1da06;
  border-radius: 90%;
}

.el-icon-setting {
  color: #fa0723 !important;
  animation: fade 8000ms infinite!important;
  -webkit-animation: fade 8000ms infinite!important;
  background: #fa0723;
    border-radius: 90%;
  //color: rgba(8, 255, 0, 0.92) !important;
  //animation: fade 20000ms infinite!important;
  //-webkit-animation: fade 20000ms infinite!important;
  //font-size: 100%!important;
  //background: #02f53f;
  //border-radius: 90%;
}

.el-icon-moon {
  color: #9b05f8 !important;
  animation: fade 600ms infinite!important;
  -webkit-animation: fade 600ms infinite!important;
    background: #9b05f8;
    border-radius: 90%;
}

.el-icon-loading {
  color: #b805f5 !important;
  animation: fade 10000ms infinite!important;
  -webkit-animation: fade 10000ms infinite!important;
  //background: #a5a7a5;
}

.box {
  width: 400px;

  .top {
    text-align: center;
  }

  .left {
    float: left;
    width: 60px;
  }

  .right {
    float: right;
    width: 60px;
  }

  .bottom {
    clear: both;
    text-align: center;
  }

  .item {
    margin: 4px;
  }

  .left .el-tooltip__popper,
  .right .el-tooltip__popper {
    padding: 8px 10px;
  }
}

</style>
